<template>
  <PageContainer>
    <div class="text-[16px] color-333 mb-[20px]">账户概览</div>
    <div class="pl-[40px] flex">
      <div class="flex flex-col">
        <span class="flex color-666 text-[14px] mb-[10px]">余额(元) <tipLogo :type="2" /></span>
        <div class="flex items-center gap-[20px]">
          <RouterLink
            :to="{
              path: '/finance/balance',
            }"
          >
            <span class="text-[24px] balance cursor-pointer">5000.00</span>
          </RouterLink>
          <RouterLink
            :to="{
              path: '/finance/withdrawList',
            }"
          >
            <span class="flex color-999 text-[14px] items-center cursor-pointer balance">
              可提现余额25666.00元 <el-icon><ArrowRight /></el-icon>
            </span>
          </RouterLink>
        </div>
      </div>
      <div class="flex flex-col ml-[100px]">
        <span class="flex color-666 text-[14px] mb-[10px]">已结算(元) <tipLogo :type="2" /></span>
        <div>
          <span class="text-[24px] color-333">8000.00</span>
        </div>
      </div>
    </div>
    <el-divider style="border-top: 10px solid #f7f7f7; margin-bottom: 0" />
    <el-tabs v-model="activeTabName">
      <el-tab-pane label="提现记录" name="withdrawalRecord">
        <withdrawalRecord />
      </el-tab-pane>
    </el-tabs>
  </PageContainer>
</template>

<script setup lang="ts">
import withdrawalRecord from './withdrawTabs/withdrawalRecord.vue'
defineOptions({
  name: 'Withdraw',
})
const activeTabName = ref('withdrawalRecord')
</script>

<style lang="scss" scoped>
.balance {
  &:hover {
    color: $main-color;
  }
}
</style>
